<template>
    <div class="layout">
        <div class="layout-header">
            <div class="layout-header-left">
                <div class="layout-header-left-logo">
                    <img src="@/images/layout/logo.png" alt="">
                </div>
                <div class="layout-header-left-title">
                    智能化农业遥感监测数据平台
                    <div class="layout-header-left-title-light">
                        <img src="@/images/layout/light.png" alt="">
                    </div>
                </div>
                <div class="layout-header-left-navs">
                    <div class="layout-header-left-navs-item" v-for="(v, k) in state.navs" :key="k" @click="go(v.path)">
                        <div class="layout-header-left-navs-item-icon "> <img :src="v.src" alt=""></div>
                        <div class="layout-header-left-navs-item-title" :class="isActive == k ? 'active' : ''">{{ v.title }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="layout-header-right">
                <div class="layout-header-right-user">
                    <div class="layout-header-right-user-left">
                        <img src="@/images/layout/user.png" alt="">
                    </div>
                    <div class="layout-header-right-user-text">
                        admin,欢迎你！
                    </div>
                    <div class="layout-header-right-user-right">
                        <img src="@/images/layout/over.png" @click="$router.replace('/login')" alt="">
                        <img src="@/images/full.png" @click="togglefullScreen" alt="">
                    </div>
                </div>
                <div class="layout-header-right-time">
                    <div class="layout-header-right-time-top">{{ state.time }}</div>
                    <div class="layout-header-right-time-bottom">{{ state.date }}</div>

                </div>
            </div>
        </div>
        <div class="layout-content">
            <router-view></router-view>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive } from "vue";
import dayjs from 'dayjs'
import src1 from '@/images/layout/nav1.png'
import src2 from '@/images/layout/nav2.png'
import src3 from '@/images/layout/nav3.png'
import src4 from '@/images/layout/nav4.png'
import src5 from '@/images/layout/nav5.png'
import { useRoute, useRouter } from 'vue-router';

const state = reactive({
    time: '',
    date: '',
    navs: [
        { title: '首页', src: src1, path: '/index' },
        { title: '三维可视化', src: src2, path: '/index/space' },
        { title: '作物长势', src: src3, path: '/index/grow' },
        { title: '智能监测', src: src4, path: '/index/see' },
        { title: '土壤墒情', src: src5, path: '/index/plane' },
    ],
    isFull: false
})
const togglefullScreen = () => {
    state.isFull ? exitFullScreen() : fullScreen()
    state.isFull = !state.isFull
}
const fullScreen = async () => {
    var de = document.querySelector('body');
    if (de.requestFullscreen) {
        await de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        await de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        await de.webkitRequestFullScreen();
    }
}
const exitFullScreen = () => {
    const func =
        document.exitFullScreen ||
        document.mozCancelFullScreen ||
        document.webkitExitFullscreen ||
        document.msExitFullscreen;
    func.call(document);
}
const router = useRouter()
const go = (path: string) => {
    router.push(path)
}
const route = useRoute()
const isActive = computed(() => {
    let index = state.navs.findIndex((v) => v.path == route.path)
    return index
})
const getTime = () => {
    state.date = dayjs().format('YYYY.MM.DD')
    state.time = dayjs().format('HH:mm')
}
onMounted(() => {
    getTime()
    setInterval(() => {
        getTime()
    }, 1000)
})
</script>
<style lang="less" scoped>
.layout {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #010b36;

    &-header {
        height: 70px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        justify-content: space-between;
        // background: #000;
        background: url(@/images/layout/bg3.png) no-repeat;
        background-size: 100% 100%;

        &-left {
            display: flex;
            align-items: center;

            &-logo {
                img {
                    width: 60px;
                    object-fit: cover;
                }
            }

            &-title {
                font-size: 30px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #FFFFFF;
                margin: 0 44px 0 20px;
                position: relative;
                top: 10px;

                &-light {
                    img {
                        width: 100%;
                        height: 30px;
                    }
                }
            }

            &-navs {
                display: flex;

                &-item {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    margin-right: 16px;

                    &-icon {
                        width: 30px;
                        height: 30px;
                        background: rgba(38, 120, 213, 0.15);
                        border: 1px solid #2678D5;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 7px;

                        img {
                            width: 100%;
                            object-fit: cover;
                        }
                    }

                    &-title {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        min-width: 106px;
                        height: 30px;
                        text-align: center;
                        color: #E2F0FE;
                        background: url(@/images/layout/bg2.png) no-repeat;
                        background-size: 100% 100%;
                        padding: 0 16px;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        &.active {
                            background: url(@/images/layout/bg1.png) no-repeat;
                            background-size: 100% 100%;
                        }

                        position: relative;

                        &::before {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 5px;
                            background: #30537D;
                            height: 100%;
                            ;
                        }
                    }
                }
            }
        }

        &-right {
            display: flex;
            align-items: center;

            &-user {
                display: flex;
                margin-right: 20px;

                &-left,
                &-right {
                    img {
                        width: 20px;
                        object-fit: cover;
                        cursor: pointer;
                    }
                }

                &-text {
                    margin: 0 20px;
                    font-size: 12px;
                }
            }

            &-time {
                font-size: 22px;
                font-family: Adobe Heiti Std;
                font-weight: normal;
                color: #FFFFFF;

                &-bottom {
                    font-size: 12px;
                    color: #ccc;
                }
            }
        }

    }

    &-content {
        flex: 1;
        overflow: auto;
    }
}
</style>